<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>js商品移动</title>
    <style>
        p,ul,h3{ margin:0; padding:0; }
        em { font-style:normal; }
        strong{ font-weight: normal}
        li { list-style:none; }
        .box{ width: 800px;border: 1px solid #c5e3ea;margin: 30px auto; padding: 1px 2px;}
        .clear { zoom:1; }
        .clear:after { content:''; display:block; clear:both; }
        /*---三角---*/
        .triangle_left, .triangle_down_right {  position:absolute;  width:0;  height:0;  overflow:hidden;  border-top:6px solid transparent;  border-bottom:6px solid transparent;  }
        .triangle_left {  border-right:6px solid #000007;  top: 3px; left: 15px;}
        .triangle_down_right { border-left:6px solid #000007;  top: 3px; left:148px;}

        #btn{ position: absolute; top: 2px; left: 120px}
        #btn li{ float: left; width: 50px; height: 30px; border: 1px solid #84a3bc; line-height: 30px; text-align: center; color: #96aeb6; margin-left: -1px; cursor: pointer}
        .nav{ width: 798px; height: 33px;position: relative; background-color: #cbe6ef; border: 1px solid #84a3bc; border-top: none; }
        .nav p{ height: 33px; line-height: 33px; text-indent: 20px;}
        #btn .active{background-color: #fff; border-bottom:none;height: 31px;  }
        .warp{ width: 798px; height: 128px; padding: 10px;  position: relative; }
        .img0{ float: left}
        .img0 img{ width: 106px; height: 86px; border: 3px solid #92ceef;}
        .img0 p{ height: 25px; width: 112px; line-height: 25px; text-align: center; background-color:#e6e9f3; margin-top: -4px; }
        #list{ position: absolute; left: 10px; top: 10px; }
        #list li{ float: left; width: 100px;height:90px; margin-left: 30px; }
        #list li img{ width: 100px;height: 60px;  border: 1px solid #e9e9e8;}
        .warp0{float: left; position: relative; width: 686px; height: 100px;   overflow: hidden; }
        .warp0 p{height: 25px; width: 112px; line-height: 25px; text-align: center; }
        #xl{ position: absolute ; left: 380px; bottom: 0px; width: 200px; height: 30px ;}
        .div0{ width:20px; height: 20px; background-color: #98cfeb; float: left; margin-left: 10px; cursor: pointer; }
        .div1{ width: 10px; height: 10px; border-radius: 50%; background-color: #a2a7a7;  float: left;  margin-left: 10px; margin-top: 5px; cursor: pointer;}
    </style>
    <script>
        window.onload=function(){
            var oUl=document.getElementById("list");
            var oli=oUl.getElementsByTagName("li");
            var width=parseInt(getStyle(oli[0],"width"));
            var widthLeft=parseInt(getStyle(oli[0],"marginLeft"));
            move(oUl,"left",10,-((width+widthLeft)*(oli.length-5)));
            function move(obj,arrt,step,destination,fun){
                clearInterval(obj.timer);
                step=destination>parseInt(getStyle(obj,arrt))?step:-step;
                obj.timer=setInterval(function(){
                    var dqwz=parseInt(getStyle(obj,arrt))+step;
                    if(dqwz>destination&&step>0 || dqwz<destination&&step<0 ){
                        clearInterval(obj.timer);
                        dqwz=destination;
                        if(fun){
                            fun();
                        }
                    }
                    obj.style[arrt]=dqwz+"px";
                },100)
            }
            function getStyle(obj,attr){
                return obj.currentStyle?obj.currentStyle[attr] : getComputedStyle(obj)[attr];
            }
            var oDiv=document.getElementById("xl");
            var oDiv_=oDiv.getElementsByTagName("div");
            oDiv_[0].onclick=function(){
                clearInterval(oUl.timer);
                var leftnum=parseInt(getStyle(oUl,"left"));
                if(leftnum!=-390){
                    var wy=0;
                    leftnum-100<=-390?wy=-390:wy=leftnum-100;
                    move(oUl,"left",10,wy);
                }
            }
            oDiv_[oDiv_.length-1].onclick=function(){
                clearInterval(oUl.timer);
                var leftnum=parseInt(getStyle(oUl,"left"));
                if(leftnum<=10){
                    var wy=0;
                    leftnum+100>=10?wy=10:wy=leftnum+100;
                    move(oUl,"left",10,wy);
                }
            }
          /*  var oBtn=document.getElementById("btn");
            var oBtns=oBtn.getElementsByTagName("li");
            oBtns*/
        }
    </script>
</head>
<body>
<div class="box">
    <div class="nav">
        <p>新鲜数码</p>
        <ul id="btn">
            <li  class="active">新品</li>
            <li>极客</li>
        </ul>
    </div>
    <div class="warp clear">
        <div class="img0">
            <img  src="img/content/pic1.gif"/>
            <p>三星系列手机</p>
        </div>
        <div class="warp0">
            <ul id="list">
                <li>
                    <img src="img/content/hot1.gif"/>
                    <p>三星系列1</p>
                </li>
                <li>
                    <img src="img/content/hot2.gif"/>
                    <p>三星系列2</p>
                </li>
                <li>
                    <img src="img/content/hot4.gif"/>
                    <p>三星系列3</p>
                </li>
                <li>
                    <img src="img/content/hot5.gif"/>
                    <p>三星系列4</p>

                </li>
                <li>
                    <img src="img/content/hot6.gif"/>
                    <p>三星系列5</p>
                </li>
                <li>
                    <img src="img/content/hot1.gif"/>
                    <p>三星系列6</p>
                </li>
                <li>
                    <img src="img/content/hot2.gif"/>
                    <p>三星系列7</p>
                </li>
                <li>
                    <img src="img/content/hot4.gif"/>
                    <p>三星系列8</p>
                </li>
            </ul>
        </div>
        <div id="xl" class="clear">
            <div class="div0">
                <a href="javascript:;" class="triangle_left"></a>
            </div>
            <div class="div1"></div>
            <div class="div1"></div>
            <div class="div1"></div>
            <div class="div1"></div>
            <div class="div1"></div>
            <div class="div0">
                <a href="javascript:;" class="triangle_down_right"></a>
            </div>
        </div>
    </div>
</div>
</body>
</html>